<template>
  <div class="hello">
	<div class="mui-input-row mui-search">
		 <input type="search" class="mui-input-clear" placeholder="输入搜索内容" v-model="search">				
  </div>
<!--<mt-cell title="标题文字">
  <span>icon 是图片</span>
  <img slot="icon" src="../assets/logo.png" width="24" height="24">
</mt-cell>-->
<div class="course" v-for="(item, index) in searchres" :class="[{'line-last' : index % 2!== 0}, 'index-board-' + item.id]">
			<div class="inner">
				<h2>{{ item.title }}</h2>
				<p class="des">{{ item.description }}</p>
				<div class="btn">
				<router-link :to="{name:'detail',query:{id:item.id}}"><button>立即购买</button>
        </router-link>
				</div>
			</div>
		</div>
</div>
</template>

<script>
export default {
  name: 'Course',
  data () {
    return {
      selected:{
      	
      },
      search:"",
      boardList: [{
						title: 'Vue课程',
						description: ' 是一套用于构建用户界面的渐进式框架。',
						id: 'Vue',
						toKey: 'analysis',
						saleout: false
					},
					{
						title: 'JavaScript课程',
						description: '是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。',
						id: 'JavaScript',
						toKey: 'count',
						saleout: false
					},
					{
						title: 'HTML课程',
						description: '超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。',
						id: 'HTML',
						toKey: 'forecast',
						saleout: true
					},
					{
						title: 'Java课程',
						description: '是一门面向对象编程语言',
						id: 'Java',
						toKey: 'publish',
						saleout: false
					}
				],
    }
  },
  computed:{
  	searchres(){
  		return this.boardList.filter((bd)=>{
  			return  bd.title.match(this.search);
  		})
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

h2 {
				font-size: 16px;
			}
			.course {
				width: 49%;
				margin-right: 2%;
				float: left;
				margin-bottom: 2%;
				/*padding-left: 2%;*/
       /* border: solid 1px darkgray;*/

			}
			.inner {
				/*width: 68%;*/
				text-align: center;
				/*border: solid 1px red;*/
				padding-top: 100px;
				padding-bottom: 10px;
				/*background: red;*/

			}
			.des {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.index-board-Vue {
				background: url(../../static/img/pic1.jpg) no-repeat content-box ;
			
				background-size: 100% 100px;
			}
			.index-board-JavaScript {
				background: url(../../static/img/pic2.jpg) no-repeat content-box;
				background-size: 100% 100px;
			}
			.index-board-HTML {
				background: url(../../static/img/pic3.jpg) no-repeat content-box;
				background-size: 100% 100px;
			}
			.index-board-Java {
				background: url(../../static/img/pic4.jpg) no-repeat content-box;
				background-size: 100% 100px;
			}
			.line-last {
			/*	border: none;*/
				margin-right: 0;
			}
</style>
